<template>
  <!--<div class="tree">-->
  <!--  <span class="leaf-node">【1】</span>-->
  <!--  <div class="tree">-->
  <!--    <span class="leaf-node">【2】</span>-->
  <!--    <div class="tree">-->
  <!--      <span class="leaf-node">【4】</span>-->
  <!--      <div class="tree">-->
  <!--        <span class="leaf-node">【8】</span>-->
  <!--      </div>-->
  <!--      <div class="tree">-->
  <!--        <span class="leaf-node">【9】</span>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--    <div class="tree">-->
  <!--      <span class="leaf-node">【5】</span>-->
  <!--    </div>-->
  <!--  </div>-->
  <!--  <div class="tree">-->
  <!--    <span class="leaf-node">【3】</span>-->
  <!--    <div class="tree">-->
  <!--      <span class="leaf-node">【6】</span>-->
  <!--    </div>-->
  <!--    <div class="tree">-->
  <!--      <span class="leaf-node">【7】</span>-->
  <!--    </div>-->
  <!--  </div>-->
  <!--</div>-->
  <div class="app-container">
    <div class="x">
      <pai :node="list[0]" />
    </div>
  </div>
</template>

<script>
import Pai from './Pai.vue'
import api from '@/api'
export default {
  name: 'MemberTeam',
  components: {
    Pai,
  },
  data() {
    return {
      list: [],
      listLoading: false
    }
  },
  methods: {
    // refreshPage() {
    //   console.log(this.list)
    // },
    // async fetchDataMain(resolve) {
    //   this.list = []
    //   api.member.getPengMain({ id: this.$route.params.id }).then(response => {
    //     return resolve(response.data)
    //   }).finally(() => {
    //   })
    // },
    // async fetchData(id, resolve) {
    //   api.member.getPengTree({ id }).then(response => {
    //     return resolve(response.data)
    //   }).finally(() => {
    //   })
    // },
    // load(node, resolve) {
    //   console.log(node)
    //   if (node.level === 0) {
    //     this.fetchDataMain(resolve)
    //   }
    //   this.fetchData(node.key, resolve)
    // },
    // showLevel(data) {
    //   return data.level0 && data.level0.display || ''
    // },
    // change(data) {
    //   // console.log(data.id, data.sort)
    //   if (!data.sort || isNaN(data.sort)) {
    //     return this.$message.error('操作错误, 只能是数字!!!')
    //   }
    //   api.member.changeSort({ id: data.id, sort: data.sort }).then(() => {
    //     this.$message.success('操作成功')
    //   })
    // }
    getAll() {
      api.member.getPeng().then(response => {
        console.log(response)
        this.list = response.data
      })
    }
  },
  mounted() {
    // this.fetchData()
    this.getAll()
  }
}
</script>

<style scoped lang="scss">
.x {
  //background: blue;
  overflow: auto;
}
//div.tree {
//  display: flex;
//  flex-wrap: wrap;/*span 需要独占一行，所以此 flex 布局必须要折行显示 */
//}
//div.tree > span {
//  width: 100%;
//  text-align: center;
//}
//.tree > .tree {
//  width: 50%;
//}
//.leaf-node {
//  background: red;
//  margin: 10px;
//}

.el-tree ::v-deep.el-tree-node > .el-tree-node__content{
  //width: 300px;
  height: 160px;
  //background: #f3f5f7;
  //border-radius: 10px;
  //margin-bottom: 10px;
  //padding-left: 30px !important;
}
.custom-tree-node {
  font-size: 12px;
  display: flex;
  .show {
    display: flex;
    flex-direction: column;
    .child {
      display: flex;
      .left {
        margin-right: 20px;
      }
    }
  }
}
//.custom-tree-node {
//  flex: 1;
//  display: flex;
//  align-items: center;
//  justify-content: space-between;
//  font-size: 14px;
//  padding-right: 10px;
//  background: #f3f5f7;
//}
//.name {
//  //background: red;
//  flex: 1;
//  overflow: hidden;
//  //text-align: center;
//}
//.right {
//  width: 220px;
//  display: flex;
//  justify-content: space-between;
//}
//.show {
//  //background: blue;
//  flex: 1;
//}
//
//.change {
//  //width: 200px;
//  .sort {
//    width: 50px;
//    //margin: 0;
//    //padding: 0;
//    height: 20px;
//    line-height: 20px;
//    border: 1px solid #ccc;
//    border-radius: 5px;
//    text-align: center;
//    margin-left: 10px;
//  }
//}

</style>
